import React, { memo, useState, useMemo } from 'react'
import Container from '@/appComponents/Container'
import { Table, message } from 'antd'
import Filter from './Filter'
import dayjs from 'dayjs'
import { downloadExcel } from '@/commonjs/util.help.js'

const EquipmentDataExports = memo(() => {
  const format = 'YYYY-MM-DD HH:mm:00'
  const user = JSON.parse(localStorage.getItem('user')) || {}
  const minuteStep15Time = useMemo(
    () => dayjs().subtract(dayjs().minute() % 15, 'minute'),
    []
  )
  const [loading, setLoading] = useState(true)
  const [data, setData] = useState([])
  const [dynamicColumns, setDynamicColumns] = useState([])

  const onDataLoaded = (loadedData) => {
    // 检查数据是否为空
    if (loadedData.length > 0) {
      // 提取动态列标题
      const dynamicColumns = Object.keys(loadedData[0])
        .filter((key) => !key.startsWith('2023-'))
        .map((key, index) => ({
          width: 150,
          title: key,
          dataIndex: key,
          key: key,
          align: 'center'
        }))
      dynamicColumns.unshift({
        title: '序号',
        width: 50,
        render: (_, __, index) => `${index + 1}`,
        align: 'center',
        width: 80
      })
      // 设置动态列和数据
      setCurrentColumns(dynamicColumns)
      const data = loadedData.map((item, index) => {
        // 过滤掉每个对象中的日期属性
        const filteredItem = { ...item }
        Object.keys(filteredItem)
          .filter((key) => key.startsWith('2023-'))
          .forEach((dateKey) => delete filteredItem[dateKey])
        return { ...filteredItem, key: index.toString() }
      })
      setData(data)
      setDynamicColumns(dynamicColumns)
    }
  }

  const staticColumns = [
    {
      title: '序号',
      width: 50,
      render: (_, __, index) => `${index + 1}`,
      align: 'center',
      key: 'serial',
      fixed: 'left'
    },
    {
      title: '区',
      dataIndex: 'county_name',
      key: 'county_name',
      align: 'center',
      width: 150,
      fixed: 'left'
    },
    {
      title: '企业名称',
      dataIndex: 'ent_name',
      key: 'ent_name',
      align: 'center',
      width: 150,
      fixed: 'left'
    },
    {
      title: '点位类型',
      dataIndex: 'dev_type_name',
      key: 'dev_type_name',
      align: 'center',
      width: 100,
      fixed: 'left'
    },
    {
      title: '设备编号',
      dataIndex: 'dev_type_numbering',
      key: 'dev_type_numbering',
      align: 'center',
      width: 100,
      fixed: 'left'
    }
  ]

  const [paramsData, setParamsData] = useState({
    start_time: dayjs(minuteStep15Time).subtract(6, 'h').format(format),
    end_time: dayjs(minuteStep15Time).format(format),
    time_type: 1,
    data_type_id: 8,
    project_id: user.project_id,
    county_id: -1, //区
    ent_name: ''
  })

  const [currentColumns, setCurrentColumns] = useState([])

  const handleConfirm = (selectedKeys) => {
    setCurrentColumns(selectedKeys)
  }

  const handleExport = () => {
    if (data.length === 0) {
      message.info('暂无数据导出')
      return
    }
    downloadExcel(data, currentColumns, '导出数据')
  }
  return (
    <>
      <Container.ContainerQuery title="查询条件">
        <Filter
          columns={staticColumns}
          paramsData={paramsData}
          setParamsData={setParamsData}
          onConfirm={handleConfirm}
          onDataLoaded={onDataLoaded}
          dynamicColumns={dynamicColumns}
          onDownloadExcel={handleExport}
          setLoading={setLoading}
        />
      </Container.ContainerQuery>
      <Container.ContainerContent>
        <Table
          loading={loading}
          bordered
          columns={currentColumns}
          dataSource={data}
          size="small"
          scroll={{ y: '65vh' }}
        />
      </Container.ContainerContent>
    </>
  )
})

export default EquipmentDataExports
